$mainColor:#23a8f5;
$white:#fff;
$borderColor:#e4e4e4;

.joModal{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.5);
    text-align:center;
    z-index:1040;
    display:none;
}

.joModal-dialog{
    width:100%;
    height:100%;
}

.joModal-content{
    width:442px;
    height:204px;
    margin-left:auto;
    margin-right:auto;
    background-color:$white;
    border-radius:4px;
    box-shadow:0 0 20px #000;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    overflow:hidden;
}

.joModal-header{
    width:100%;
    
    .title{
        height:40px;
        line-height:40px;
        background-color:#f2f2f2;
        font-size:16px;
    }
}

.joModal-body .text-tip{
    height:127px;
    line-height:127px;
    font-size:16px;
}

.joModal-footer{
    width:100%;
    
    .modal-btn{
        display:inline-block;
        width:115px;
        height:38px;
        line-height:38px;
        border-radius:4px;
        margin-left:12px;
        margin-right:12px;
        cursor:pointer;
//      transition:all 250ms;
//      -webkit-transition:all 250ms;
//      -moz-transition:all 250ms;
//      -o-transition:all 250ms;
//      overflow:hidden;
        
        &:hover{opacity:0.8}
    }
    
    .cancel{
        color:#333;
        background-color:#d7d7d7;
        margin-left:94px;
    }
    
    .confirm{
        color:$white;
        background-color:$mainColor;
    }
}

//slideTop
[data-liffect="slideTop"]{
    opacity: 0;
    position: relative;
    animation: slideTop 400ms ease forwards;
    -webkit-animation: slideTop 400ms ease forwards;
    -moz-animation: slideTop 400ms ease forwards;
    -o-animation: slideTop 400ms ease forwards;
}

@-webkit-keyframes slideTop {
    0% { opacity: 0; top: -50%; }
    100% { opacity: 1; top: 50%; }
}

@-moz-keyframes slideTop {
    0% { opacity: 0; top: -50%; }
    100% { opacity: 1; top: 50%; }
}

@-o-keyframes slideTop {
    0% { opacity: 0; top: -50%; }
    100% { opacity: 1; top: 50%; }
}

@keyframes slideTop {
    0% { opacity: 0; top: -50%; }
    100% { opacity: 1; top: 50%; }
}

//fadeIn
[data-liffect="fadeIn"]{
    opacity: 0;
    animation: fadeIn 400ms ease forwards;
    -webkit-animation: fadeIn 400ms ease forwards;
    -moz-animation: fadeIn 400ms ease forwards;
    -o-animation: fadeIn 400ms ease forwards;
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1;}
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1;}
}